<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天津大学《计算机网络》课程教学平台</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- 标题栏 -->
    <header class="header">
        <div class="header-content">
            <h1>天津大学《计算机网络》课程教学平台</h1>
            <nav class="nav-menu">
                <a href="/" class="nav-link active">首页</a>
                <button id="loginButton" class="nav-button">登录</button>
                <button id="registerButton" class="nav-button">注册</button>
                <div id="userInfo" class="user-info" style="display: none;">
                    <span id="userName"></span>
                    <button id="logoutButton" class="logout-button">退出</button>
                </div>
            </nav>
        </div>
    </header>

    <!-- 主要内容区域 -->
    <main class="main-content">
        <!-- 左侧问题记录和聊天区域 -->
        <div class="chat-and-history-wrapper">
            <!-- 左侧问题记录面板 -->
            <div class="history-panel" id="historyPanel">
                <div class="history-header">
                    <h3>问题记录</h3>
                    <div class="history-controls">
                        <button id="newConversationButton" class="new-conversation-btn">新建对话</button>
                        <button id="clearHistoryButton" class="clear-history-btn">清空</button>
                    </div>
                </div>
                <div class="history-list" id="historyList">
                    <div class="no-history">
                        暂无问题记录
                    </div>
                </div>
            </div>
            
            <!-- 聊天区域 -->
            <div class="chat-section">
                <div class="chat-header">
                    <h2>AI 智能助教</h2>
                    <p>基于LangChain和DeepSeek的智能问答系统</p>
                </div>
                
                <div class="chat-container">
                    <div id="notLoggedIn" class="not-logged-in">
                        <div class="login-prompt">
                            <p>请先登录或注册账号，以便使用AI助教功能</p>
                            <div class="prompt-buttons">
                                <button id="promptLoginButton" class="primary-button">登录</button>
                                <button id="promptRegisterButton" class="secondary-button">注册</button>
                            </div>
                        </div>
                    </div>
                    
                    <div id="chatWrapper" style="display: none;">
                        <div class="chat-messages" id="chatMessages">
                            <div class="message ai-message">
                                <div class="message-content">
                                    <p>您好！我是您的计算机网络课程AI助教。我可以帮助您：</p>
                                    <ul>
                                        <li>回答课程相关问题</li>
                                        <li>提供课本和视频的具体参考位置</li>
                                        <li>分析您的学习情况</li>
                                        <li>推荐相关学习资源</li>
                                    </ul>
                                    <p>请随时向我提问！</p>
                                </div>
                            </div>
                        </div>
                        
                        <div class="chat-input-container">
                            <textarea id="messageInput" placeholder="请输入您的问题..." rows="3"></textarea>
                            <button id="sendButton" class="send-button">
                                <span>发送</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 右侧课本区域 -->
        <div class="textbook-section">
            <div class="textbook-header">
                <h2>课程教材</h2>
            </div>
            
            <div class="textbook-list" id="textbookList">
                <!-- 课本列表将通过JavaScript动态生成 -->
                <div class="loading">正在加载课本列表...</div>
            </div>
        </div>
    </main>

    <!-- 视频学习区域 -->
    <section class="video-section">
        <div class="section-header">
            <h2>视频学习</h2>
        </div>
        
        <div class="video-container-wrapper">
            <div class="video-grid" id="videoGrid">
                <!-- 视频列表将通过JavaScript动态生成 -->
                <div class="loading">正在加载视频列表...</div>
            </div>
        </div>
    </section>

    <!-- 登录模态框 -->
    <div id="loginModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h2>用户登录</h2>
            <form id="loginForm">
                <div class="form-group">
                    <label for="loginUsername">用户名</label>
                    <input type="text" id="loginUsername" required>
                </div>
                <div class="form-group">
                    <label for="loginPassword">密码</label>
                    <input type="password" id="loginPassword" required>
                </div>
                <div id="loginError" class="error-message"></div>
                <button type="submit" class="submit-btn">登录</button>
            </form>
            <p class="modal-footer">还没有账号？<span id="switchToRegister" class="link">立即注册</span></p>
        </div>
    </div>

    <!-- 注册模态框 -->
    <div id="registerModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h2>用户注册</h2>
            <form id="registerForm">
                <div class="form-group">
                    <label for="registerName">姓名</label>
                    <input type="text" id="registerName" required>
                </div>
                <div class="form-group">
                    <label for="registerUsername">用户名</label>
                    <input type="text" id="registerUsername" required>
                </div>
                <div class="form-group">
                    <label for="registerPassword">密码</label>
                    <input type="password" id="registerPassword" required>
                </div>
                <div class="form-group">
                    <label for="registerConfirmPassword">确认密码</label>
                    <input type="password" id="registerConfirmPassword" required>
                </div>
                <div id="registerError" class="error-message"></div>
                <button type="submit" class="submit-btn">注册</button>
            </form>
            <p class="modal-footer">已有账号？<span id="switchToLogin" class="link">立即登录</span></p>
        </div>
    </div>

    <script src="script.js?v=1.2"></script>
</body>
</html>
